<template>
  <div class="aside">
    <el-menu
      text-color="#fff"
      active-text-color="#7DE9FF"
      default-active="1"
      :collapse-transition="false"
      class="el-menu-vertical-demo font-20 fontW-b font-f-ib bg-58"
      :collapse="isCollapse"
      @open="handleOpen"
      @select="hundleSelect"
      @close="handleClose"
      :default-openeds="selectedIndexs"
      ref="menus">
      <!-- 一级菜单 -->
      <el-submenu :index="item.id + ''" v-for="item in HomeList" :key="item.id">
        <!-- 一级菜单的模板区域 -->
        <template slot="title">
          <!-- 图标 -->
          <!-- <i :class="iconsObj[item.id]"></i> -->
          <!-- <i class="el-icon-menu"></i> -->
          <img :src="item.img_url" alt="">
          <!-- 文本 -->
          <div class="flex-s-between">
            <span class="">{{$t('sideba.'+ item.authName)}}</span>
            <img src="../../assets/icon/download.svg" alt="">
          </div>
        </template>
        <!-- 二级菜单 -->
        <el-menu-item :index="sunItem.id + ''" v-for="sunItem in item.children" :key="sunItem.id" class="border-r" style="padding-left:10px">
          <template slot="title" >
            <!-- 二级菜单的模板区域 -->
            <!-- <i class="el-icon-menu"></i> -->
            <!-- <i class="el-icon-s-help"></i> -->
            <!-- 图标 -->
            <div class="flex">
              <img :src="sunItem.img_url" alt="" style="width:12%" v-if="sunItem.img_url">
              <!-- <img :src="sunItem.img_url" alt="" style="width:20%" > -->
              <label class="flex-s-between" style="width:100%" v-if="sunItem.cid">
                <div  class="flex-s-between" style="width:100%">
                  <span>{{$t('sideba.'+ sunItem.authName)}}</span>
                  <el-checkbox @change="menuChange" class="mgb-5" ></el-checkbox>
                </div>
              </label>
              <label class="flex-s-between" style="width:100%" v-else>
                <div  class="flex-s-between" style="width:100%">
                  {{ sunItem.authName }}
                  <el-checkbox @change="menuChange" class="mgb-5" ></el-checkbox>
                </div>
              </label>
            </div>
            <!-- 文本 -->
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
// import { arrayRemove } from '../../Js/common'
export default {
  name: 'asideItem',
  props: {
    HomeList: {
      type: Array,
      default: () => []
    },
    menuitem: {
      type: Array,
      default: () => []
    },
    isCollapse: {
      type: Boolean,
      default: () => false
    },
    menuchecked: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      selectedIndexs: ['0', '1'],
      selectArr: [],
      chooseIndex: 0,
      chooseChildIndex: 0
    }
  },
  mounted () {
    console.log(this.menuList, this.isCollapse)
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath, JSON.stringify(key))
    },
    handleClose (key, keyPath) {
      this.$refs.menus.open(keyPath)
      console.log(key, keyPath, JSON.stringify(key))
    },
    hundleSelect: function (key, keyPath) {
      // console.log(key, keyPath, 'hundleSelect', JSON.stringify(key))
      this.chooseIndex = Number(keyPath[0])
      this.chooseChildIndex = Number(keyPath[1])
      console.log(this.chooseChildIndex, '-------11eeeeeeeeeeeee-------')
    },
    menuChange: function (val) {
      console.log(val, 'menuChange')
      if (val) {
        console.log(this.HomeList[this.chooseIndex])
        console.log(this.HomeList[this.chooseIndex].children[this.chooseChildIndex], '1111111111111')
        let chooseVal = this.HomeList[this.chooseIndex].children[this.chooseChildIndex]
        this.selectArr.push(chooseVal)
        console.log(this.selectArr, 1111111)
      } else {
        let chooseVal = this.HomeList[this.chooseIndex].children[this.chooseChildIndex]
        this.arrayRemove(chooseVal)
        // debugger
        // arrayRemove(chooseVal, this.selectArr)
        // console.log(this.selectArr, 22222)
      }
      let obj = {
        a: this.selectArr,
        b: this.chooseChildIndex
      }
      this.$emit('onSelectArr', obj)
    },
    arrayIndexOf: function(val) {
      console.log(val.type, '-----------------')
      console.log(val, 'arrayIndexOf', val.authName)
      for (var i = 0; i < this.selectArr.length; i++) {
        console.log(this.selectArr[i].authName, 'arrayIndexOf', val.authName)
        if (this.selectArr[i].authName === val.authName) {
          return i
        }
      }
      return -1
    },
    arrayRemove: function(val) {
      var index = this.arrayIndexOf(val)
      console.log(index, 3333333, val)
      if (index > -1) {
        this.selectArr.splice(index, 1)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.aside {
  width: 100%;
  height: auto;
  /deep/.el-menu {
    background: none;
    /deep/.el-submenu__title {
      color: none;
      padding-left:10px;
      /deep/ .el-menu-item{
        padding-left:10px;
      }
    }
    /deep/.el-submenu__title:hover {
      background: none;
    }
    /deep/.el-submenu:hover {
      background: none;
    }
  }
  /deep/.el-submenu .el-menu{
      background: #898989;
      border-radius: 5px;
      margin: 0 5px 0 0;
  }
  /deep/.el-icon-arrow-down:before{
        display: none;
  }
  /deep/.el-checkbox__inner::after{
  border: none;
  }
  /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
  background: #7DE9FF;
  border-color: #7DE9FF;
  }
}
</style>
<style>
.el-menu--vertical .el-menu{
  background: #585858;
}
</style>
